<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

<script type="text/javascript">
	var api = chrome.extension.getBackgroundPage();

	function doUserCba(tab, updateButton) {
		$("#cba-button").addClass("loading");

		var ct = api.ensureCbaTab(tab.id);

		ct.refresh(true, function(result) {
			$("#cba-button").removeClass("loading");
			if (result.state == 0) {
				$("#count").text(result.count);
				$("#message").removeClass("error").text("씨바를 날렸습니다.")
						.slideDown().delay(3000).fadeOut();
			} else if (result.state == 1) {
				$("#message").addClass("error").text("이미 씨바를 날렸습니다.")
						.slideDown().delay(3000).fadeOut();
			} else if (result.state == 2) {
				$("#message").addClass("error").text("이곳은 씨바 금렵구입니다.")
						.slideDown().delay(3000).fadeOut();
			}
		}, false);
	}

	function doLocalCba(tab, updateButton) {
		var ct = api.ensureCbaTab(tab.id);
		ct.refresh(true, function(result) {
			$("#count").text(result.count);
		});
	}

	function main() {
		chrome.tabs.getSelected(null, function(tab) {
			var ct = api.ensureCbaTab(tab.id);
			if (ct.state == "done") {
				$("#count").text(ct.cbaCount);
			} else {
				doLocalCba(tab);
			}
		});

		$("#cba-button").click(function() {
			if ($(this).hasClass("loading")) {
				return;
			}
			chrome.tabs.getSelected(null, doUserCba);
		});

		$("#cba-top-ten-button").click(function() {
			chrome.tabs.create({
				url : "http://cba-page.appspot.com"
			});
		});

		$("#message").hide();
	}
</script>
<style type="text/css">
body {
	width: 370px;
	margin: 0px;
	font-family: "나눔고딕", NanumGothic, Arial, Serif;
	font-size: 0.9em;
}

#content {
	margin: 10px;
}

#footter {
	text-align: right;
	background-color: #eee;
	padding: 5px;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
}

#message {
	display: inline-block;
	text-shadow: 0px 1px 1px white;
	margin-top: 5px;
}

.error {
	color: #ee3322;
}

.loading {
	background-image: url("resource/ajax-loader.gif");
	color: red;
}

.button {
	border-radius: 5px;
	padding: 5px 30px;
	display: inline-block;
	border: silver 1px solid;
	background-color: #fafafa;
	cursor: pointer;
	text-shadow: 0px 1px 1px white;
	background-repeat: no-repeat;
	background-position: left center;
	background-position: 6px center;
	font-weight: bolder;
	color: #444;
	box-shadow: inset 0px 0px 15px rgba(0, 0, 0, 0.1);
	-webkit-transition: all 0.08s ease-in-out;
}

.button:hover {
	background-color: #FFD65B;
	border-color: #E2B571;
	box-shadow: inset 0px 0px 15px rgba(0, 0, 0, 0.1);
}

.button:active {
	box-shadow: inset 0px 2px 15px rgba(0, 0, 0, 0.2);
}

#logo {
	width: 48px;
	float: left;
	margin: 0px 10px;
}

#desc {
	text-align: right;
	font-size: 0.9em;
	color: #444;
}
</style>
</head>
<body onload="main()">
	<img id="logo" src="resource/icon48.png">
	<div id="content">
		<p id="cba-label">
			이 페이지는 <span id="count">?</span> 명이 씨바스럽다고 생각합니다.
		</p>

		<p id="desc">씨바는 단순 추임새입니다.</p>
	</div>
	<div id="footter">
		<div id="message"></div>
		<div id="cba-top-ten-button" class="button">탑 10</div>
		<div id="cba-button" class="button">씨바</div>

	</div>
</body>
</html>